<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>用户注册</h3>
<hr />
<!--
表单项元素
-->
<form action="#" method="get">

    <!--隐藏域：type="hidden"
        作用：不给用户看，但是需要提交给服务器
    -->
    <input type="hidden" name="id" value="123">
    <table>
        <tr>
            <td>用户名：</td>
            <!--单行文本框 type="text"
               必须设置name属性： 用于服务器获取数据时的操作，如果没有这个数据无法提交给服务器
               其他属性
                    placeholder="请输入用户名"， 设置用户输入提示信息
                    id属性，每个标签都可以有id属性，用于css与js进行操作元素，服务器不会使用id属性， id属性值必须唯一
            -->
            <td><input type="text" id="username" name="username" placeholder="请输入用户名"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <!--密码框 type="password"
               效果：输入时非明文的密码
            -->
            <td><input type="password" id="password" name="password" placeholder="请输入密码"></td>
        </tr>
        <tr>
            <td>性别：</td>
            <!--单选框或单选按钮 type="radio"
               效果：只能选中一个
               value="男" 是设置元素的值，用于提交给服务器使用，并不会显示出来
               checked="checked", 设置默认选中的元素
               注意: 一组单选框的name属性值必须一样，这样就可以实现单选效果，只有一个被选中
            -->
            <td>
                <input type="radio" name="gender" value="男" checked="checked">男
                <input type="radio" name="gender" value="女">女
            </td>
        </tr>
        <tr>
            <td>爱好：</td>
            <!--复选框或多选框 type="checkbox"
               效果：可以选中多个
               value="男" 是设置元素的值，用于提交给服务器使用，并不会显示出来
               checked="checked", 设置默认选中的元素
               注意: 一组复选框的name属性值必须一样，这样服务器就可以获取一组值，否则获取到多组值
            -->
            <td>
                <input type="checkbox" name="hobby" value="篮球" checked="checked">篮球
                <input type="checkbox" name="hobby" value="足球">足球
                <input type="checkbox" name="hobby" value="游戏">游戏
                <input type="checkbox" name="hobby" value="爱编程">爱编程
            </td>
        </tr>
        <tr>
            <td>学历：</td>
            <!--单选下拉框 select
               效果：只能选中一个
               value="男" 是设置元素的值，用于提交给服务器使用，并不会显示出来, value如果不写，默认是option标签体的值
               selected="selected", 设置默认选中的option下拉项
               multiple="multiple", 设置为多选下拉框
            -->
            <td>
                <select name="edu">
                    <option>院士</option>
                    <option value="1">博士后</option>
                    <option value="2">博士</option>
                    <option value="3" selected="selected">本科</option>
                    <option value="4">大专</option>
                    <option value="5">高中</option>
                    <option value="6">其他</option>
                </select>
                <!--多选下拉框-->
                <select name="edu2" multiple="multiple">
                    <option value="3">本科</option>
                    <option value="4">大专</option>
                    <option value="5">高中</option>
                    <option value="6">其他</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>照片：</td>
            <td>
                <!--
                文件域：type=file
                作用：用于上传文件
                -->
                <input type="file" name="pic">
            </td>
        </tr>
        <tr>
            <td>个人简介：</td>
            <td>
                <!--
                文本域 或 多行文本框：textarea
                作用：输入多行数据
                cols="50"，设置初始化大小50个列（50个字符）
                rows="5", 设置初始化大小5行（5行数据）
                注意：没有value属性，会提交标签体作为值提交给服务器端
                -->
                <textarea name="description" cols="50" rows="5">hello world</textarea>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <!--提交按钮1： type="submit"
                   作用：点击按钮触发表单提交数据给服务器
                -->
                <input type="submit" value="注册">
                <!--图片按钮（提交按钮2）： type="image"-->
                <input type="image" src="img/btn.png">
                <!--html5的提交按钮： button-->
                <button>用户注册</button>
                <!--重置按钮（清空按钮）：点击后数据恢复到页面初始化状态-->
                <input type="reset" value="清空或重置">
                <!--普通按钮：什么功能都没有，以后给javascript使用-->
                <input type="button" value="普通按钮1">
                <button type="button">普通按钮2</button>
            </td>
        </tr>
    </table>
</form>
</body>
</html>